<!--
 * @Author: xiongchao
 * @Date: 2024-02-29 09:07:15
 * @LastEditors: xiongchao
 * @LastEditTime: 2024-02-29 10:09:08
 * @Description: TODO
-->
<template>
  <el-carousel :autoplay="false" interval="0">
    <el-carousel-item v-for="(item, index) in imgList" :key="index">
      <div class="carousel-content">
        <img
          :src="require('@/assets/imgs/' + (index + 1) + '.jpg')"
          :alt="item.alt"
          class="carousel-image"
        />
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>
.carousel-content {
  display: flex;
  justify-content: space-between;
}

.carousel-image {
  width: calc(100% / 5 - 20px); /* 根据实际情况调整宽度 */
  margin-right: 10px; /* 空隙 */
  object-fit: cover;
}
.carousel-item:last-child {
  margin-right: 0; /* 移除最后一个图片的右侧间距 */
}
/* 当屏幕尺寸小于某一阈值时，可切换回单张显示 */
@media (max-width: 768px) {
  .carousel-image {
    width: 100%;
    margin-right: 0;
  }
}
</style>

<script>
export default {
  data() {
    return {
      imgList: [
        { src: "/src/assets/1.jpg", alt: "Image 1" },
        {
          src: "https://adp-bucket.obs.cn-south-1.myhuaweicloud.com:443/4e72f7e2-418d-49e9-ad5e-a778165fb438.png",
          alt: "Image 2",
        },
        {
          src: "https://adp-bucket.obs.cn-south-1.myhuaweicloud.com:443/4e72f7e2-418d-49e9-ad5e-a778165fb438.png",
          alt: "Image 3",
        },
        {
          src: "https://adp-bucket.obs.cn-south-1.myhuaweicloud.com:443/4e72f7e2-418d-49e9-ad5e-a778165fb438.png",
          alt: "Image 4",
        },
        {
          src: "https://adp-bucket.obs.cn-south-1.myhuaweicloud.com:443/4e72f7e2-418d-49e9-ad5e-a778165fb438.png",
          alt: "Image 5",
        },
      ],
    };
  },
};
</script>
